import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/base/base_state.dart';
import 'package:flutter_app/base/base_stateful_widget.dart';
import 'package:provider/provider.dart';

import 'ProviderTwo.dart';
import 'TestCounter.dart';

class ProviderOne extends BaseStatefulWidget {
  @override
  _ProviderOneState createState() => _ProviderOneState();
}

class _ProviderOneState extends BaseState<ProviderOne> {
  @override
  Widget build(BuildContext context) {

    // TestCounter testCounter = Provider.of<TestCounter>(context);
    //官方文档使用方式
    TestCounter testCounter = context.read<TestCounter>();
    return Scaffold(
      appBar: AppBar(
        title: Text("状态管理界面一"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          testCounter.increment();
        },
        child: Icon(Icons.add),
      ),
      body: Center(
        child: Wrap(
          spacing: 10,
          runSpacing: 10,
          children: [RedBox(), YellowBox(), BlueBox(), GreenBox()],
        ),
      ),
    );
  }
}

class RedBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("---------RedBox---------build---------");
    return Container(
        color: Colors.red,
        width: 150,
        height: 150,
        alignment: Alignment.center,
        child: Text(
          //read 不会引起rebuild，以为他不会监听值得变化。。。
          "Red:${context.read<TestCounter>().count}",
          style: TextStyle(fontSize: 20),
        ));
  }
}

class YellowBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("---------YellowBox---------build---------");
    return Container(
        color: Colors.yellow,
        width: 150,
        height: 150,
        alignment: Alignment.center,
        child: Text("Yellow:${Provider.of<TestCounter>(context).count}",
            style: TextStyle(fontSize: 20)));
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("---------BlueBox---------build---------");
    return Container(
      color: Colors.blue,
      width: 150,
      height: 150,
      alignment: Alignment.center,
      child: InkWell(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return ProviderTwo();
          }));
        },
        child: Consumer<TestCounter>(
          builder: (context, value, child) =>
              Text("Blue11:${value.count}", style: TextStyle(fontSize: 20)),
        ),
      ),
    );
  }
}

class GreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("---------GreenBox---------build---------");
    return Container(
      color: Colors.green,
      width: 150,
      height: 150,
      alignment: Alignment.center,
      child: Consumer<TestCounter>(
        builder: (context, v, c) =>
            Text("GreenBox:${v.count}", style: TextStyle(fontSize: 20)),
      ),
    );
  }
}
